<template>
  <div class="app-container ">
    <div>
        <el-input
          v-model="keywordNum"
          clearable
          style="width: 300px"
          clearable
        ></el-input>
        <el-button type="primary" @click="listloading">查询</el-button>
        <el-tabs v-model="activeTab" @tab-click="handleClick">
          <el-tab-pane label="全部" name="whole">  
              <evaluatelist :evaluatelist="evaluatelist"></evaluatelist>       
          </el-tab-pane>
          <el-tab-pane label="好评" name="account">        
              <evaluatelist :evaluatelist="evaluatelist"></evaluatelist>         
          </el-tab-pane>
          <el-tab-pane label="中评" name="setUp">
              <evaluatelist :evaluatelist="evaluatelist"></evaluatelist>
          </el-tab-pane>
          <el-tab-pane label="差评" name="third">
              <evaluatelist :evaluatelist="evaluatelist"></evaluatelist>
          </el-tab-pane>
        </el-tabs>
        <el-footer class="el-footerBox">
          <pagination
            :total="total"
            :page.sync="pageNum"
            :limit.sync="pageSize"
            @pagination="listloading"
            style="margin-bottom: auto"
          ></pagination>
        </el-footer>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { list } from "@/api/orderReview.js";
import filters from "@/filters/index.js";
import evaluatelist from "./components/list";
import Pagination from "@/components/Pagination";

export default {
  components: {
    evaluatelist,
    Pagination,
  },
  data() {
    return {
      activeTab: "whole",
      shippingDate: [],
      shopgetinfo: {},
      pageNum: 1,
      pageSize: 10,
      star: "",
      evaluatelist: [],
      keywordNum: "",
      total: 0,
      payLoads: null,
    };
  },
  computed: {
    // ...mapGetters([
    //   'name',
    //   'avatar'
    // ])
  },
  activated() {
    this.payLoads = new Date().getTime();
  },
  created() {
    this.listloading();
  },
  methods: {

    
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (_this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight
              _this.curHeight = h - 311//减去页面上固定高度height
              _this.tabsHeight = h - 381
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight
              _this.curHeight = h - 224//减去页面上固定高度height
              this.tabsHeight = h - 294
            }
          })()
        }
      },
      comeIn() {
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 224//减去页面上固定高度height
        this.tabsHeight = h - 294
      },
    handleClick(val) {
      console.log(val);
      if (val.paneName == "whole") {
        this.star = "";
        this.listloading();
      } else if (val.paneName == "account") {
        this.star = 4;
        this.listloading();
      } else if (val.paneName == "setUp") {
        this.star = 3;
        this.listloading();
      } else if (val.paneName == "third") {
        this.star = 0;
        this.listloading();
      }
    },
    listloading() {
      var _this = this;
      let params = new URLSearchParams();
      params.append("pageNum", _this.pageNum);
      params.append("pageSize", _this.pageSize);
      params.append("star", _this.star);
      params.append("keyword", _this.keywordNum);
      params.append("pageSize", _this.pageSize);
      list(params).then((res) => {
        console.log(res);
        this.evaluatelist = res.data.data;
        this.total = res.data.total;
      });
    },
  },
};
</script>
<style scoped>
.listshow {
  border-bottom: 1px solid #ccc;
}
.listshow:last-child {
  border-bottom: none;
}
</style>
